<template>
  <m-layout>
    <mt-header slot="header" :title="title">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section :borderTop="false">
        <m-divider>
          <div class="big class-title">课时主题：{{details.scheduleName}}</div>
          <div class="weak info small">
            <p><i class="iconfont">&#xe649;</i>上课时间：{{details.classTime}}</p>
            <p><i class="iconfont">&#xe64a;</i>上课校区：{{details.schollName}}</p>
          </div>
        </m-divider>
      </m-section>
      <m-section>
      <e-heading>训练方式</e-heading>
        <plan-item v-for="(item, index) in details.listTrainPlan" :key="index" :item="item"/>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
import PlanItem from './PlanItem'
import TextOmit from '@/views/components/TextOmit'

export default {
  components: {
    PlanItem, TextOmit
  },
  computed: {
    ...mapState({
      details: state => state.program.plan
    })
  },
  data () {
    return {
      title: this.$route.query.title
    }
  },
  mounted () {
    this.$store.dispatch('program/plan', {scheduleId: this.$route.query.id})
  }
}
</script>

<style lang="scss" scoped>
  .class-title{
    font-weight: bold;
    padding: 0 .24rem;
    line-height: .9rem;
  }
  .plan-info{
    .weak{
      padding: 0 .24rem .2rem
    }
    padding-bottom: .1rem;
  }
  .info{
    padding: 0 .24rem .2rem;
    p{
      margin: 0;
      padding: .1rem 0;
      i{
        margin-right: .1rem
      }
    }
  }
</style>
